<template>
  <r-operator
    class="description"
    :operators="['drag', 'setting']"
    @setting="isShowSetting = !isShowSetting"
  >
    <r-title icon="desc" :isShow="isTitleShow" v-model="title" />
    <r-input
      v-model="dataList.description"
      class="description__input"
      hint="工作积极认真负责，熟练运用办公软件，善于在工作中发现问题，解决问题，有较强的分析能力。有两年的运营经验，熟悉公众号、微博、头条等新媒体平台推广方式。"
    />

    <!--设置-->
    <r-setting
      @mouseleave="isShowSetting = !isShowSetting"
      v-model="settingList.switchLs"
      v-show="isShowSetting"
    />
  </r-operator>
</template>

<script>
import RTitle from "@/components/base/RTitle";
import RInput from "@/components/base/RInput";
import ROperator from "@/components/base/ROperator";
import RSetting from "@/components/base/RSetting";
import useData from "../useData";
import { ref } from "vue";

export default {
  name: "Description",
  components: { RTitle, RInput, ROperator, RSetting },
  props: {
    id: [String, Number],
  },
  setup(props) {
    const baseData = useData(props.id);
    const isShowSetting = ref(false);
    return {
      ...baseData,
      isShowSetting,
    };
  },
};
</script>

<style scoped lang="less">
.description {
  &__input:hover {
    background: rgba(135, 206, 250, 0.3);
  }
}
</style>
